<template>
  <div class="rz-chart-Mian">
    <div class="rz-chart-mianList not-mian">
      <div class="rz-chart-title">
        <span class="text"></span>
        <span class="">司龄分布</span>
      </div>
      <div class="rz-chart-top-mian">
        <el-form >
          <el-form-item  class="ds">
            <el-select v-model="leftCompany" placeholder="请选择公司">
              <el-option
                v-for="item in leftCompanyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item  class="ds">
            <el-select v-model="leftBranch" placeholder="请选择部门">
              <el-option
                v-for="item in leftBranchList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item  class="ds">
            <el-date-picker
              v-model="leftTime"
              type="month"
              placeholder="选择年月"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div id="rz-chartMian-left" ref="chartLeft" style="width:100%;height:237px;background:#fff;"></div>
    </div>

    <div class="rz-chart-mianList" >
      <div class="rz-chart-title">
        <span class="text"></span>
        <span class="">学历分布</span>
      </div>
      <div class="rz-chart-top-mian">
        <el-form >
          <el-form-item  class="ds">
            <el-select v-model="rightCompany" placeholder="请选择公司">
              <el-option
                v-for="item in rightCompanyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="ds">
            <el-select v-model="rightBranch" placeholder="请选择部门">
              <el-option
                v-for="item in rightBranchList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item  class="ds">
            <el-date-picker
              v-model="rightTime"
              type="month"
              placeholder="选择年月"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div id="rz-chartMian-right" ref="chartRight" style="width:100%;height:237px;background:#fff;"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      leftCompanyList: [
        {
          value: "科技公司",
          label: "科技公司",
        },
      ], //公司列表
      rightCompanyList: [
        {
          value: "右边公司",
          label: "右边公司",
        },
      ], //公司列表
      leftCompany: "", //柱形图公司内容
      rightCompany: "", //折线图公司内容
      leftBranch: "", //柱形图部门内容
      rightBranch: "", //折线图部门内容
      leftBranchList: [
        {
          value: "左边部门",
          label: "左边部门",
        },
      ], //部门列表
      rightBranchList: [
        {
          value: "右边部门",
          label: "右边部门",
        },
      ], //部门列表
      leftTime: "", //人员异动年月
      rightTime: "", //学历分布年月
    };
  },
  mounted() {
    this.chartLeft();
    this.chartRight();
  },
  methods: {
    chartLeft() {
      this.$nextTick(_ => {
        let bar_dv = this.$refs.chartLeft;
        if (!bar_dv) {
          return;
        }
        let myChart = echarts.init(bar_dv);
        // let myChart = echarts.init(document.getElementById("rz-chartMian-left"));
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            axisLabel: {//x轴下面添加单位
              formatter:'{value}人'
            },
            axisLine: {//x轴样式
              show: true,
              lineStyle: {
                width: 1,
                // color:'#eee',
                type: "solid"
              }
            },
            axisTick:{//显示刻标
              show:false,
            },
          },
          yAxis: {
            type: "category",
            data: ["未填写", ">5年", "3年-5年", "1年-3年", "3月-1年", "<3月"],//更改y轴文字值
            axisLine: {//x轴样式
              show: true,
              lineStyle: {
                width: 0,
                // color:'#fff',
                type: "solid"
              }
            },
            axisTick:{//显示刻标
              show:false,
            },
          },
          series: [
            {
              type: "bar",
              data: [50,44,11,42,17,21],
              barWidth:8,//每个柱形的宽度(高度)
              itemStyle:{
                normal:{
  　　　　　　　　　　　　//每个柱子的颜色即为colors数组里的每一项，如果柱子数目多于colors的长度，则柱子颜色循环使用该数组
                    color: function (params){
                      var colorList = ['#32B5E8','#F8A885','#4EC985','#7A6BB0','#3D6FB7','#F1605F']
                      return colorList[params.dataIndex];
                    },
                    //改变每个柱形的圆角
                    barBorderRadius: [6,6,6,6],
                },
              },
              label: {
                  normal: {
                      show: true,//是否显示
                      position: 'right',//文字位置
                      formatter: '{c}人'//c后面加单位
                  }
              },
            },
          ],
        };
        window.addEventListener("resize", function() {                
          myChart.resize();
        });//放大缩小自适应
        myChart.setOption(option);
      })
      
    },
    chartRight() {
      // let myChart = echarts.init(document.getElementById("rz-chartMian-right"));
      //解决dom问题
      this.$nextTick(_ => {
        let bar_dv = this.$refs.chartRight
        if(!bar_dv){
          return
        }
        let myChart = echarts.init(bar_dv);
        let option = {
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["高中", "中专", "大专", "本科", "研究生", "博士"],
            axisTick:{//显示刻标
              show:false,
            },
            axisLine: {//x轴样式
              show: true,
              lineStyle: {
                width: 0,
                // color:'#fff',
                type: "solid"
              }
            },
            boundaryGap:['10%','10%']
          },
          yAxis: {
            type: "value",
            min : 0,
            splitNumber : 5,
            axisLine: {//x轴样式
              show: true,
              lineStyle: {
                width: 0,
                // color:'#fff',
                type: "solid"
              }
            },
            axisTick:{
              show:false,
            },
            splitLine: {//格线样式
              show:true,
              lineStyle: {
                color: "#eee",
              }
            },
          },
          
          grid: {//柱状图位置
            top:"25%",
            left: '2%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          series: [
            {
              data: [ 1, 901, 934, 1290, 1330, 1740],
              type: "line",
              areaStyle:{
              normal:{
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 

                      offset: 0,
                      color: 'rgba(79, 172, 254, 0.59)'
                  }, {
                      offset: .9,
                      color: 'rgba(56,143,204,0.25)'
                  },{
                      offset: 1,
                      color: 'rgba(12,19,25,0.00)'
                  }])
                }
              },
              itemStyle : { 
                normal : { 
                  color:'#0BC0FA', //改变折线点的颜色
                  lineStyle:{ 
                    color:'#0BC0FA' //改变折线颜色
                  } 
                },
              },
              label: {
                  normal: {
                      show: true,//是否显示
                      position: 'top',//文字位置
                      formatter: '{c}人',//c后面加单位
                      color:'#333'
                  }
              },
            }
          ],
        };
        window.addEventListener("resize", function() {                
          myChart.resize();
        });//放大缩小自适应
        myChart.setOption(option);
      })
      
    },
  },
};
</script>

<style>
</style>